<template>
	<view class="vi_pagination">
		<!-- 上一页 -->
		<view class="vi_pagination_prev">
			<vi-style-controller @click="turnPage(-1)"
				compName="pagination"
				:type="setting.type"
				:color="setting.color"
				:textColor="setting.textColor"
				:radius="setting.radius"
				:size="setting.size"
				:plain="plain"
				:borderWidth="setting.borderWidth"
				borderBox
				:disabled="!hasPrev"
				active>
				<text class="vi_pagination_button iconfont" :class="iconSetting.prev" v-if="setting.showIcon"></text>
				<text class="vi_pagination_button" v-else>{{textSetting.prevPage}}</text>
			</vi-style-controller>
		</view>
		<!-- 当前页码显示 -->
		<view class="vi_pagination_pageNumber" v-if="!inputMode" @click="inputMode=true">
			<vi-style-controller
				control="text"
				:type="setting.type"
				:color="setting.color"
				:textColor="setting.textColor"
				inline
				active>{{currPage}}
			</vi-style-controller>
			<text class="vi_pagination_textSpace">/</text>
			<text>{{totalPages}}</text>
		</view>
		<view class="vi_pagination_input" v-else>
			<input type="number" v-model="currPage" :focus="inputMode" @blur="inputDone" />
		</view>
		<!-- 下一页 -->
		<view class="vi_pagination_next">
			<vi-style-controller @click="turnPage(1)"
				compName="pagination"
				:type="setting.type"
				:color="setting.color"
				:textColor="setting.textColor"
				:radius="setting.radius"
				:size="setting.size"
				:plain="plain"
				:borderWidth="setting.borderWidth"
				borderBox
				:disabled="!hasNext"
				active>
				<text class="vi_pagination_button iconfont" :class="iconSetting.next" v-if="setting.showIcon"></text>
				<text class="vi_pagination_button" v-else>{{textSetting.nextPage}}</text>
			</vi-style-controller>
		</view>
	</view>
</template>

<script>
	export default{
		name:"viPagination",
		props:{
			type:{
				type:[String,null],
				default:null
			},
			color:{
				type:[String,null],
				default:""
			},
			textColor:{
				type:[String,null],
				default:""
			},
			radius:{
				type:[String,Number,null],
				default:null
			},
			size:{
				type:[String,null],
				default:""
			},
			plain:{
				type:[Boolean,null],
				default:false
			},
			borderWidth:{
				type:[String,Number,null],
				default:null
			},
			value:{
				type:[String,Number,null],
				default:0
			},
			//记录总数
			total:{
				type:[String,Number,null],
				default:0
			},
			pageSize:{
				type:[String,Number,null],
				default:0
			},
			showIcon:{
				type:[Boolean,null],
				default:null
			},
			icon:{
				type:[Object,null],
				default:()=>({})
			},
			text:{
				type:[Object,null],
				default:()=>({})
			},
		},
		data(){
			return {
				currPage:1,
				dicIcon:{
					prev: "icon-arr-left",
					next: "icon-arr-right",
				},
				dicText:{
					prevPage: "上一页",
					nextPage: "下一页"
				},
				inputMode:false,
				
			}
		},
		computed:{
			setting(){
				return {
					type: this.type ||"primary",
					color: this.color ||"",
					textColor: this.textColor ||"",
					radius: this.$api.isDefined(this.radius)? this.radius :"0.25em",
					size: this.size ||"md",
					borderWidth: this.$api.isDefined(this.borderWidth)? this.borderWidth :1,
					total: Number(this.total) ||0,
					pageSize: Number(this.pageSize) ||20,
					showIcon: this.$api.isBoolean(this.showIcon)? this.showIcon :true,
				}
			},
			totalPages(){
				let {total, pageSize} = this.setting;
				return Math.ceil(total/pageSize) ||1;
			},
			hasPrev(){
				return this.currPage>1
			},
			hasNext(){
				return this.currPage < this.totalPages
			},
			iconSetting(){
				if(this.$api.isObject(this.icon)){
					return Object.assign({},this.dicIcon,this.icon)
				}
				return this.dicIcon
			},
			textSetting(){
				if(this.$api.isObject(this.text)){
					return Object.assign({},this.dicText,this.text)
				}
				return this.dicText
			}
		},
		methods:{
			inputDone(){
				this.$nextTick(()=>{
					this.turnPage(0);
					this.inputMode =false;
				})
			},
			turnPage(val){
				let newPage = Number(this.currPage) + val;
				if(newPage<1){
					newPage =1
				}else if(newPage > this.totalPages){
					newPage = this.totalPages
				}
				this.currPage = newPage;
				this.$emit("change",{
					current: this.currPage,
					size: this.setting.pageSize,
					type: val>0? "next":(val<0?"prev":""),
				})
			},
			//手动提交当前页数据，外部用
			submit(){
				this.$emit("change",{
					current: this.currPage,
					size: this.setting.pageSize,
					type: "",
				})
			},
			//重置页码
			reset(){
				this.currPage =1;
				this.submit();
			},
			//返回当前数据，外部用
			getData(){
				return {
					current: this.currPage,
					size: this.setting.pageSize,
				}
			}
		},
		watch:{
			"value":{
				immediate:true,
				handler(newValue){
					let num = Number(newValue)||1;
					this.currPage = num<0? 1 :num;
				}
			},
		}
	}
</script>

<style lang="scss">
.vi_pagination{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	.vi_pagination_textSpace{
		margin: 0 0.25em;
	}
	.vi_pagination_input{
		flex-grow: 1;
		color: #666;
		text-align: center;
	}
	.vi_pagination_pageNumber{
		flex-grow: 1;
		text-align: center;
	}
}
</style>